<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="/resource/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<head>
<meta charset="UTF-8">
<title>分类</title>
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<!-- 左侧树形菜单 -->
				<div id="tree"></div>


			</div>
			<div class="col-md-6">
				<!-- 右侧增删改查 -->
				<!-- 添加 -->
				<form id="addForm">

					<div class="form-group row">
						<label for="inputPassword" class="col-sm-2 col-form-label">父分类名</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="id1" >
							<input type="hidden" name="parentId">
						</div>
					</div>
					<div class="form-group row">
						<label for="inputPassword" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="id2" name="path">
						</div>
					</div>
					<div class="form-group row">
						<label for="inputPassword" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="id3" name="name">
						</div>
					</div>
				</form>
				<button type="button" class="btn btn-primary"
					onclick="addCategory()">添加分类</button>
				<hr>
				<!-- 删除和修改 -->
				<form id="delupdateForm">

					<div class="form-group row">
						<label for="inputPassword" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
						<input type="hidden" name="id">
						
							<input type="text" class="form-control" id="id4" name="path">
						</div>
					</div>
					<div class="form-group row">
						<label for="inputPassword" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="id5" name="name">
						</div>
					</div>
				</form>
				<button type="button" class="btn btn-primary"
					onclick="updateCategory()">修改分类</button>
				<button type="button" class="btn btn-primary"
					onclick="delCategory()">删除分类</button>

			</div>

		</div>




	</div>
	<script type="text/javascript">
	function delCategory(){
		$.post("cat/delCategory",$("#delupdateForm").serialize(),function(flag){
			if(flag){
				alert("success");
				var url="cat/list";
				$("#workArea").load(url);
			}else{
				alert("fail");
			}
		})
		
		
	}
	function updateCategory(){
		$.post("cat/updateCategory",$("#delupdateForm").serialize(),function(flag){
			if(flag){
				alert("success");
				var url="cat/list";
				$("#workArea").load(url);
			}else{
				alert("fail");
			}
		})
		
		
	}
	function addCategory(){
		$.post("cat/addCategory",$("#addForm").serialize(),function(flag){
			if(flag){
				alert("success");
				var url="cat/list";
				$("#workArea").load(url);
			}else{
				alert("fail");
			}
		})
	}
	
		$.post("cat/getTree", {}, function(data) {
			$('#tree').treeview({
				data : data,
				onNodeSelected: function(event, data) {
					 $("#id1").val(data.text);
					 $("#id2").val(data.path);
					 $("#id4").val(data.path);
					 $("#id5").val(data.text);
					 $("[name='parentId']").val(data.id);
					 $("[name='id']").val(data.id);
					 //console.log(data);
				}
			});
		})
	</script>
</body>
</html>